import React,{Component}from 'react'
import {Button,Modal,Form,Input} from 'antd';
import { Table,message} from 'antd';
import {Checkbox} from 'antd';
import '../css/bases.css'
import http from '../../api/http'
import AES from '../../api/secret'
class Adminlist extends Component{
    constructor(props){
        super(props);
        this.state = { visible: false,formTitle:'添加一级权限',adminList:[],rolelist:[]};
    }
    componentDidMount() {
        this.selectadmin()
    };
    selectadmin(){
        const that = this;
        http.get('accountlist','ADMINUSER').then(res =>{
            if(res.code === 0){
                that.setState({adminList:res.data})
            }
        })
    }
    // 弹框显示，并渲染rolelist
    showModal = () => {
        const that = this;
        http.get('rolelist','MENU').then(res =>{
            if(res.code === 0){
                var list = res.data
                for(var i =0;i< list.length;i++){
                    list[i].select = true;
                }
                that.setState({rolelist:res.data,visible: true,})
            }
        })
    };
    // 提交表单内容
    handleOk = e => {
        e.preventDefault();
        var rolelist = this.state.rolelist;
        var role = []
        for(var i=0;i<rolelist.length;i++){
            if(rolelist[i].select){
                var type = {'roleId':rolelist[i].id}
                role.push(type)
            }
        }
        this.props.form.validateFields((err, values) => {
            if (!err) {
                values.role = JSON.stringify(role)
                values.passwd = AES.Encrypt(values.passwd)
                // http.post('backstage/adminUser',values,'ADMINUSER').then(res =>{
                //     if(res.code === 0){
                //         that.setState({visible: false});
                //         message.success('新增成功', 10);
                //         that.selectadmin()
                //     }else{
                //         message.success(res.data, 10);
                //     }
                // })
            }
        });
    };
    // 多选情况
    onChange(index){
        var rolelist = this.state.rolelist;
        rolelist[index].select = !rolelist[index].select;
        this.setState({rolelist:rolelist})
    }
    // 关闭弹框
    handleCancel= () =>{this.setState({visible: false,});};
    //删除
    delectAdmin =(idx) =>{
        var that = this;
        http.delete('backstage/adminUser/'+ idx.id,'ADMINUSER').then(res =>{
            if(res.code === 0){
                message.success('删除成功', 10);
                that.selectadmin();
            }
        })
    }
    render(){
        const { getFieldDecorator } = this.props.form;
        const { Column } = Table;
        const self =this;
        return(
            <div>
                <div className='flexsb'>管理员列表<Button type="primary" onClick={this.showModal}>新增管理员</Button></div>
                {/* 弹框 */}
                <div>
                    <Modal title={this.state.formTitle} visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel} width={600} cancelText='关闭' okText='提交'>
                        <Form onSubmit={this.handleOk} className="login-form form bases-form">
                            <Form.Item>
                                {getFieldDecorator('name', {rules: [{ required: true, message: '请输入用户名称!'}],})(
                                <Input size='large' placeholder="名称"/>,)}
                            </Form.Item>
                            <Form.Item>
                                {getFieldDecorator('nickName', {rules: [{ required: true, message: '请输入用户昵称!'}],})(
                                <Input size='large' placeholder="昵称"/>,)}
                            </Form.Item>
                            <Form.Item>
                                {getFieldDecorator('passwd', {rules: [{ required: true,min:5, message: '请输入密码,最少5位数'}],})(
                                <Input type='password' size='large' placeholder="密码" />,)}
                            </Form.Item>
                            <Form.Item>
                                {getFieldDecorator('phone', {rules: [{ required: true,pattern:/^1[3456789]\d{9}$/, message: '请输入正确格式手机号'}],})(
                                <Input size='large' placeholder="手机号" />,)}
                            </Form.Item>
                            <Form.Item>
                                {getFieldDecorator('email', {rules: [{ required: true,pattern:/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确格式的邮箱'}],})(
                                <Input type='email' size='large' placeholder="邮箱" />,)}
                            </Form.Item>
                            <div>
                                {this.state.rolelist.map(function(item,index){
                                    return(
                                        <Checkbox key={item.id} onChange={self.onChange.bind(self,index)} checked={item.select}>{item.roleName}</Checkbox>
                                    )
                                })}
                            </div>
                        </Form>
                    </Modal>
                </div>
                <div>
                    <Table dataSource={this.state.adminList} size="middle" rowKey={rocode => rocode.id}> 
                        <Column title="姓名" dataIndex="nickName" key="nickName" />
                        <Column title="账户" dataIndex="name" key="name" />
                        <Column title="地址" dataIndex="email" key="email" />
                        <Column title="操作" key="action" render={(index) => (
                            <span><Button type="primary" onClick={this.delectAdmin.bind(this,index)}>删除</Button></span>
                        )}/>
                    </Table>
                </div>
            </div>
        )
    }
}
const LoginForm = Form.create({ name: 'normal_auth' })(Adminlist);
export default LoginForm